import React from 'react'
import style from '../styles/Login.module.scss'
import { Link, useNavigate } from 'react-router-dom'
import type { FormProps } from 'antd'
import { Button, Flex, Form, Input, message, Space, Typography } from 'antd'
import { LOGIN_PATH } from '../roters'
import { useRequest } from 'ahooks'
import { systemRegisterFun } from '../api/system'
const { Title } = Typography

type FieldType = {
  userName?: string
  passWord?: string
  confirmPassword?: string
}

export default function Login() {
  // 创建 Form 实例，用于管理所有数据状态
  const [form] = Form.useForm()
  const nav = useNavigate()

  const { run: registerFun, loading: registerLoading } = useRequest(
    async data => await systemRegisterFun(data),
    {
      manual: true,
      onSuccess(res) {
        message.success(res.message)
        nav(LOGIN_PATH)
      }
    }
  )

  const onFinish: FormProps<FieldType>['onFinish'] = values => {
    registerFun(values)
  }

  return (
    <div className={style['login-container']}>
      <Flex
        vertical
        justify="center"
        style={{ width: 400, backgroundColor: 'white', padding: '15px' }}
      >
        <Flex justify="center" style={{ marginBottom: 20 }}>
          <Title level={2}>注册</Title>
        </Flex>
        <Form
          name="basic"
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete="off"
          form={form}
        >
          <Form.Item<FieldType>
            label="用户名"
            name="userName"
            rules={[
              { required: true, message: '请输入用户名' },
              { min: 5, max: 20, message: '请输入5-20位字符' }
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item<FieldType>
            label="密码"
            name="passWord"
            rules={[
              { required: true, message: '密码不能为空' },
              { pattern: /^[a-zA-Z0-9]{6,20}$/, message: '请输入6-20位字母、数字' }
            ]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item<FieldType>
            label="确认密码"
            name="confirmPassword"
            dependencies={['passWord']}
            rules={[
              { required: true, message: '密码不能为空' },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue('passWord') === value) {
                    return Promise.resolve()
                  }
                  return Promise.reject(new Error('两次密码不一致'))
                }
              })
            ]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item label={null}>
            <Space style={{ marginTop: '15px' }}>
              <Button loading={registerLoading} type="primary" htmlType="submit">
                立即注册
              </Button>
              <Link to={LOGIN_PATH}>已有账号，去登录</Link>
            </Space>
          </Form.Item>
        </Form>
      </Flex>
    </div>
  )
}
